<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="container-fluid">
    <link href="/static/dist/lib/datagrid/zui.datagrid.min.css" rel="stylesheet">
    <script src="/static/dist/lib/datagrid/zui.datagrid.min.js"></script>


    <div id="myDataGrid" class="datagrid">
        <header>
            <div class="input-control search-box search-box-circle has-icon-left has-icon-right pull-right" id="searchboxExample">
                <input id="inputSearchExample1" type="search" class="form-control search-input" placeholder="搜索">
                <label for="inputSearchExample1" class="input-control-icon-left search-icon"><i class="icon icon-search"></i></label>
                <a href="#" class="input-control-icon-right search-clear-btn"><i class="icon icon-remove"></i></a>
            </div>
            <h1>日志管理</h1>
        </header>
        <div class="datagrid-container"></div>
        <div class="pager"></div>
    </div>

    <script type="application/javascript">
        var myData = $('#myDataGrid').datagrid({
            dataSource: {
                cols:[
                    {name: 'id', label: 'ID', width: 100},
                    {name: 'clientIp', label: 'IP', width: 134},
                    {name: 'createTime', label: '时间', valueType: 'date',width: 160},
                    {name: 'loginName', label: '登陆账号', width: 109},
                    {name: 'optContent', label: '操作内容', width: 287},
                    {name: 'roleName', label: '描述', width: 287}
                ],
                remote: function(params) {
                    console.log(params);
                    return {
                        // 原创请求地址
                        url: '/admin/log/list',
                        // 请求类型
                        type: 'GET',
                        // 数据类型
                        dataType: 'json'
                    };
                }
            },
            states: {
                pager: {page: 1, recPerPage: 10},
                search: ''
            },
            /*searchFunc: function(item, searchKeyArr){
                console.log(item);
                console.log(searchKeyArr);
            },*/
            valueOperator: {
                // date 值转换器会影响所以 valueType 为 `date` 的列
                date: {
                    getter: function(dataValue, cell, dataGrid) {
                        return new Date(dataValue).toLocaleString();
                    }
                }
            }
        });

        console.log($('#myDataGrid').data('zui.datagrid'));
    </script>
</div>
</body>
</html>